<template>
	<wsPage title="商品评论列表">
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="用户昵称">
			            <Input v-model="queryForm.memberName" placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem label="所属商品">
			            <Input v-model="queryForm.productName" placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem label="所属分类" class="ws-form-lable">
			            <Cascader  trigger="click"
							:clearable="true"
							:data="options" 
							change-on-select 
							@on-change="handleChange">
						</Cascader>
			        </FormItem>
				</Form>
			</div>
			<!--<div slot="list_operate">
				<Button type="ghost" :disabled="!isTableSelected" @click="batchDelReview">批量删除</Button>
			</div>-->
			<div slot="list_data">
				<Table border 
					:columns="table.columns" 
					:data="table.data"
					@on-selection-change="tableSelected">
				</Table>
			</div>
		</wsSmPanel>

		<!--查看评论详情弹框-->
		<wsModal v-model="commentModal.show"  title="查看详情"  @on-ok="detailModalCancel" @on-cancel="detailModalCancel">
        	<Form ref="detailForm" :model="detailForm" :label-width="80">
        		<FormItem label="商品名称：">{{detailForm.productName}}
        		</FormItem>
        		<FormItem label="用户昵称：">{{detailForm.memberName}}
        		</FormItem>
        		<FormItem label="评分：">
        		<Rate  v-model="detailForm.score" disabled></Rate>
        		</FormItem>
        		<FormItem label="创建时间：">{{detailForm.createDate}}
        		</FormItem>
        		<FormItem label="评论内容：">{{detailForm.content}}
        		</FormItem>
        	</Form>
		</wsModal>


	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {

				commentModal:{
					show:false
				},
				detailForm:{},			
				queryForm: {
                	categoryId:'',
                	memberName:'',
                	productName:''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },{
						title: '编号',
                        key: 'id',
                        width: 80,
                        align: 'center'
					},
                    {
						title: '所属商品',
                        key: 'productName',
                        // width: 500,
                        align: 'center'
					},{
						title: '用户昵称',
                        key: 'memberName',
                        width: 150,
                        fixed: 'center'
					},{
						title: '评分',
                        key: 'score',
                        // width: 150,
                        align: 'center',
                         render: (h, params) => {
                        	// let tagColor = params.row.topType == 0?'blue':'red';
                        	// let tagName = params.row.publicationType == 0?'未发布':'已发布';
                        	return h('div', [
                                h('Rate',{
                                    props: {
										'value':params.row.score,
										'disabled':true
                                    }
                                })]);
                        }
       
					},{
						title: '评论时间',
                        key: 'createDate',
                        // width: 150,
                        align: 'center'
					},
					/*{
						title: '评论内容',
                        key: 'content',
                        align: 'center'
					},*/{
						title: '操作',
						width: 180,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div',[h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										let rowId = params.row.id;
										this.settingUseRange(rowId);
									}
								}
							}, '查看')/*,h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										let rowId = params.row.id;
                                		this.singleDelProductReview(rowId);
									}
								}
							}, '删除')*/])
						}
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中

				}
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},
			init() {
				this.disabled=false;
				this.query();
				this.queryTree();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ms/productReviews?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 选择所属分类
			 */
	      	handleChange:function(value) {
	      		if(value == null || value == ''){
			      	this.queryForm.categoryId = null;
			     }else{
				    for(var i=0;i<value.length;i++){
				      	if(i >= value.length - 1){
				      		this.queryForm.categoryId = value[i];
				      	}
				    }
				}
	        },
	        /**
			 * 查询所属分类
			 */
	        queryTree:function(){
	        	const _this = this;
				this.axios.get('/ws/ops/categoryTree').then(response => {
					_this.options = [];					    
					//赋值
					_this.options = response.data.data;
				});
			},
			
			//打开详情模态框
			settingUseRange(rowId){
				const _this = this;
				this.axios.get('/ws/ms/productReviews/'+ rowId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.detailForm = res.data;
					} else {
						_this.$Message.warning(res.message);
					}
				});
				this.commentModal.show=true;
			},
			detailModalCancel(){
				this.commentModal.show = false;
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			buildPageData1(data_) {
				var arr = [];
				arr.push(data_.list);
				this.comment.commentData = arr;
			},
			/**
			 * 单个删除确认
			 */
			singleDelProductReview(rowId) {
        		const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录吗?',
        			onOk: function() {
        				_this.delRow(rowId);
        			}
        		});		
			},
			/**
			 * 删除
			 */
			delRow(rowId){
				const _this = this;
				this.axios.delete('/ws/ms/productReviews/' + rowId ).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除商品评论失败:' + message_);
					}	
			    });				
			},

			/**
			 * 批量删除提示
			 */
			batchDelReview() {
				const _this = this;
				this.$confirm({
        			content: '你确认删除选中数据吗?',
        			onOk: function() {
        				_this.batchDelRow();
        			}
        		});
			},
			/**
			 * 批量删除
			 */
			batchDelRow(){
				let ids = [];
				this.table.selection.forEach((item) => {
			      ids.push(item.id);
			    });
				if(ids.length < 1){
					this.$Message.warning('请选择要删除的评论');
					return;
				}
				const _this = this;
				this.axios.post('/ws/ms/productReviews/batchDel' , ids).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
						_this.table.selection=[];
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除评论失败:' + message_);
					}	
			    });	
			},

		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.expand-row{
        margin-bottom: 16px;
    }
    .layout-content-main{
    	padding: 20px;
        float:left;
        justify-content: space-around;
        font-size:14px;
    }
</style>
